<template>
  <div class="q-pa-md" style="max-width: 300px">
    <t-uploader url="http://localhost:4444/upload" label="Custom list" multiple>
      <template v-slot:list="scope">
        <t-list separator>
          <t-item v-for="file in scope.files" :key="file.__key">
            <t-item-section>
              <t-item-label class="full-width ellipsis">
                {{ file.name }}
              </t-item-label>

              <t-item-label caption> Status: {{ file.__status }} </t-item-label>

              <t-item-label caption>
                {{ file.__sizeLabel }} / {{ file.__progressLabel }}
              </t-item-label>
            </t-item-section>

            <t-item-section v-if="file.__img" thumbnail class="gt-xs">
              <img :src="file.__img.src" />
            </t-item-section>

            <t-item-section top side>
              <t-btn
                class="gt-xs"
                size="12px"
                flat
                dense
                round
                icon="delete"
                @click="scope.removeFile(file)"
              />
            </t-item-section>
          </t-item>
        </t-list>
      </template>
    </t-uploader>
  </div>
</template>
